<div class="clearfix"></div>
<h1>Devotees Assigned</h1>
<div style="margin-bottom:30px;width:750px;">
    <div id="popUpMessage" class="msg"></div>
    <div class="scrolDivBox">
        <div class="scrolDivHeader">
            Add more devotees&nbsp;:&nbsp;<input name="seldevotee" id="seldevotee" type="text" style="width: 300px;"/>
            <div id="search" style="display:inline;color:red;background:yellow;"></div>
        </div>
        <div class="scrolDivList" style="height:500px!important;">
            <ul id="selected_dids">
                <?php if(count($this->devoteeList)): ?>
                <?php $c=0; foreach ($this->devoteeList as $u): ?>
                <li class='liSelectedItem'>
                    <img src="<?php echo $this->baseUrl()?>/photos/thumbs/<?php echo $this->escape($u['pics'])?>" alt="<?php echo $this->escape($u['display_name'])?>" title="<?php echo $this->escape($u['display_name'])?>"/>
                    <a class='btnTopRightCorner' href='javascript:void(0)' title='Remove this devotee.'>X</a>
                    <?php echo $this->escape($u['display_name'])?><br/>did : <span class='clsDID'><?php echo $this->escape($u['did'])?></span><br/><?php echo $this->escape($u['centername'])?>                    
                </li>
                <?php endforeach; ?>
                <?php else: ?>
                    <li class="empty">No devotees selected.</li>
                <?php endif; ?>
            </ul>
        </div>
    </div>
    <div style="text-align:right;margin-top:6px;">
        <input type="button" id="btnSavePopUp" value="Save"/>&nbsp;<input type="button" onclick="RG.hidePopUp();" value="Close"/>
    </div>
    <style>
        .yui3-aclist-content{
            width: 600px;
            position: relative;
        }
        .yui3-aclist-item{
            float: left;
            display: inline;
            width: 250px;
        }
        .photoInAc{
            width:30px;
            height:40px;
            float: left;
            margin:2px ;
            margin-right:8px;
        }
        .result{
            border-bottom: 1px solid #F6F6F6;
        }
    </style>
</div>
<div class="clearfix"></div>
<script>
YUI().use('autocomplete', 'autocomplete-highlighters','json-stringify','io-base','io-form', function (Y) {
    var inputNode  = Y.one('#seldevotee');
    var myUrl=document.URL;
    myUrl=myUrl.substring(0,myUrl.indexOf("/",7));
    var surl = "/admin/user/devoteelist?s={query}&abc=1";
    inputNode.plug(Y.Plugin.AutoComplete, {
        maxResults: 20,
        resultHighlighter: 'wordMatch',
        resultTextLocator: 'display_name',
        resultListLocator: 'result',
        source:surl,
        /*
        requestTemplate: function () {
            return '?s={query}&abc=1'; 
        },
        */
        resultFormatter: function (query, results) {
            return Y.Array.map(results, function (result) {
                return '<div class="result">' +
                    '<img class="photoInAc" src="' + myUrl + '/photos/thumbs/' + result.raw.pics + '" alt="thumbnail">' +
                    '<span class="title">' + result.highlighted + '<br>' + result.raw.centername + ' (did: ' + result.raw.did+ ')</span>' +
                    '</div>';
            })
        }
    });
    inputNode.ac.on('query', function (e) {
        Y.one('#search').set('innerHTML','Searching...');
    }); 
    inputNode.ac.on('results', function (e) {
        Y.one('#search').set('innerHTML','');
    }); 

    var selected_dids = Y.one('#selected_dids');
    selected_dids.delegate('click', removeItem, '.btnTopRightCorner');
    function removeItem(e){
        this.ancestor('li').remove();
    }
    inputNode.ac.on('select', function (e) {
        var result = e.result;
        e.preventDefault();
        inputNode.select();
        inputNode.ac.hide();
        selected_dids.all('.empty').remove();
        result.raw.myUrl=myUrl;
        var TEMPLATE_LI = "<li class='liSelectedItem'>"
        + "<img src='{myUrl}/photos/thumbs/{pics}' alt='{display_name}' title='{display_name}'>"
        + "<a class='btnTopRightCorner' href='javascript:void(0)' title='Remove this devotee.'>X</a>"
        + "{display_name}<br>did : <span class='clsDID'>{did}</span><br>{centername}"                    
        + "</li>";
        var html = Y.Lang.sub(TEMPLATE_LI, result.raw);
        selected_dids.append(html);
    });//Input node closed  
    Y.one('#btnSavePopUp').on('click',saveDids);
    function saveDids(){
        var dids = [];
        dids.push(0);//To avoid null
        Y.all('#selected_dids .clsDID').each(function (e) {dids.push(e.get('innerHTML'));});
        var jSelectedIds=Y.JSON.stringify(dids);
        data='jSelectedIds=' + jSelectedIds;
        var cfg = {
            method: 'POST',
            data:data
        };
        var sUrl = "/admin/user/editmoreinfo/info/<?php echo $this->info ?>/id/<?php echo $this->id ?>/do/SAVE";
        pleaseWait.show();
        var request = Y.io(sUrl, cfg);
    }
    var handleFailure = function(ioId, o){
    	pleaseWait.hide();
    	if(o.responseText !== undefined){
    		var s = "Server Problem";
    		s += "\nTransaction id: " + ioId;
    		s += "\nHTTP status: " + o.status;
    		s += "\nStatus code message: " + o.statusText;
    		s += "\nResponseText: " + o.responseText;
    		alert(s);
            Y.one('#error').set('innerHTML',s);
    	}
    };
    var handleSuccess = function(ioId, o){
        pleaseWait.hide();
        if(o.responseText !== undefined){
            var res=eval('(' + o.responseText + ')');
            if(res.htmlBody!== undefined && res.htmlBody!= ''){
                Y.one('#popUpContent').set('innerHTML',res.htmlBody);
                p.set("centered",true);
                responseDiv = document.getElementById('popUpContent');
                scripts = responseDiv.getElementsByTagName('script');
                eval(scripts[0].innerHTML);
            }
            if(res.htmlBodyBg!== undefined && res.htmlBodyBg!= ''){
                Y.one('#tbDevotees').set('innerHTML',res.htmlBodyBg);
            }
            if(res.message!== undefined && res.message!= ''){
                Y.one('#popUpMessage').set('innerHTML',res.message);
            }
        }
    }
    Y.on('io:success', handleSuccess);
    Y.on('io:failure', handleFailure);
});//YUI closed
</script>
 